<template>
  <div class="wrap">
    <!-- 头部卡片 -->
    <a-card class="card_header">
      <Header></Header>
    </a-card>

    <!-- 表格数据卡片 -->
    <a-card class="card_content">
      <a-table
        :columns="tabColumns"
        :data="usersStore.$state.usersList"
        :bordered="{ cell: true }"
        :loading="usersStore.$state.isUserTableLoading"
        :pagination="{ total: usersStore.$state.total, current: usersStore.$state.getListInfo.page }"
        @page-change="changeCurrentPage"
      >
        <!-- 序号 -->
        <template #index="{ rowIndex }">
          {{ (usersStore.getListInfo.page - 1) * 10 + (rowIndex + 1) }}
        </template>

        <!-- 操作 -->
        <template #operate="{ rowIndex }">
          <a-button type="primary" @click="userDetailClick(usersStore.$state.usersList[rowIndex])">
            <template #icon>
              <icon-info-circle-fill />
            </template>
            详情
          </a-button>
          <a-button
            style="margin-left: 10px"
            type="primary"
            status="warning"
            @click="userLogClick(usersStore.$state.usersList[rowIndex])"
          >
            日志
          </a-button>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'user'
})
</script>
<script lang="ts" setup>
// 引入
import Header from './module/header/index.vue'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { useUsersStore } from '@/store'
const usersStore = useUsersStore()
const router = useRouter()

// 定义表格的字段规则
const tabColumns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    align: 'center',
    width: 80
  },
  {
    title: '用户名',
    dataIndex: 'userName',
    slotName: 'userName',
    align: 'center',
    width: 150
  },
  // {
  //   title: '用户编码',
  //   dataIndex: 'userCode',
  //   slotName: 'userCode',
  //   align: 'center'
  // },
  {
    title: '手机号',
    dataIndex: 'userPhone',
    slotName: 'userPhone',
    align: 'center',
    width: 200
  },
  {
    title: '用户邮箱',
    dataIndex: 'userEmail',
    slotName: 'userEmail',
    align: 'center',
    width: 250
  },
  {
    title: '公司名称',
    dataIndex: 'userCompany',
    slotName: 'userCompany',
    align: 'center',
    width: 300
  },
  {
    title: '创建时间',
    dataIndex: 'userCreateTime',
    slotName: 'userCreateTime',
    align: 'center',
    width: 200
  },
  {
    title: '最近登录',
    dataIndex: 'userLastLogin',
    slotName: 'userLastLogin',
    align: 'center',
    width: 200
  },
  {
    title: '操作',
    dataIndex: 'operate',
    slotName: 'operate',
    align: 'center',
    width: 200
  }
])

// 表格当前页的Change事件
const changeCurrentPage = (e: any) => {
  usersStore.$state.getListInfo.page = e
  usersStore
    .getUsersListFunc()
    .then(() => {
      // Message.success('加载成功')
    })
    .catch(() => {
      // Message.success('加载失败')
    })
}

// 用户详情信息的按钮点击事件
const userDetailClick = (info: object) => {
  usersStore.userDevList = []
  usersStore.shareDevList = []
  usersStore.$state.userInfo = info
  usersStore.userDevList = info.deviceList
  usersStore.shareDevList = info.shareDeviceList
  router.push({ path: '/user/UserDetail' })
  console.log('查看用户详情信息', info)
}

// 用户日志的按钮点击事件
const userLogClick = (info: object) => {
  usersStore.$state.userInfo = info
  router.push({ path: '/user/userLog' })
  console.log('查看用户日志')
}

// 初始化
onMounted(() => {
  // 加载数据，给予相应的提示信息
  usersStore
    .getUsersListFunc()
    .then(() => {
      // Message.success('加载成功')
    })
    .catch(() => {
      // Message.success('加载失败')
    })
})
</script>

<style scoped>
.wrap {
  padding: 14px;
}

.card_header {
  margin-bottom: 14px;
  overflow-x: auto;
}

.card_content {
  height: 690px;
}
</style>
